<template>
  <div>Event Component</div>
  <div>props.id changed by route -- {{ id }}</div>
  <div>eventId is -- {{ event.id }}</div>
  <div>event title is -- {{ event.title }}</div>
  <div>event body is -- {{ event.body }}</div>
<!--  {{event}}-->

<!--  <div>page: {{page}}</div>-->
<!--  <div v-if="eventsTotal !== 0">eventsTotal: {{eventsTotal}}</div>-->
<!--  <div v-for="item in currentevents">{{`id: ${item.id}, title: ${item.title}`}}</div>-->
</template>

<script>
import {mapState} from 'vuex'
import store from '../store'
function getPageEvents(routeTo, next) {
  const currentPage = parseInt(routeTo.query.page)
  store.dispatch('event/fetchEvent', {
    id: routeTo.params.id
  }).then(() => {
    routeTo.params.page = currentPage
    next()
  })
}

export default {
  name: "Event",
  props: ['id', 'page'],
  // beforeRouteEnter(routeTo, routeFrom, next) {
  //   getPageEvents(routeTo, next)
  // },
  // beforeRouteUpdate(routeTo, routeFrom, next) {
  //   getPageEvents(routeTo, next)
  // },
  computed: {
    hasNextPage() {return this.event.eventsTotal > this.page * this.event.perPage},
    ...mapState(['event']),
    // ...mapState('event', ['currentevents','eventsTotal'])
  },
  methods: {
    createEvent() {
      NProgress.start()
      this.$store
          .dispatch('event/createEvent', this.event)
          .then(() => {
            // ...
            this.$router.push({
              name: 'event-show',
              params: {id: this.event.id}
            })
            // this.event = this.createFreshEventObject()
          }).catch(() => {
        NProgress.done() // End the progress bar when error
      })

    },
  }

}
</script>
